<template>
  <div class="menu">
    <div class="block" style="text-align: center">
      <div style="width: 100%;float: left"     @click="editParam">
        <el-image style="width: 100px;height: 100px;border-radius:50px" :src="src"></el-image>
      </div>
      <div style="width: 100%;float: left;color: #fff;margin-top: 10px" id="username" v-html="username">

      </div>
    </div>
    <el-aside :width="isCollapse?'65px':'250px'" style="text-align: left;margin-top: 20px;overflow: hidden">
      <el-menu
        router
        :default-active="activePath"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        :unique-opened="true"
        :collapse="isCollapse">
        <template v-for="(item,index) in menus">
          <el-submenu :index="item.path" :key="index" v-if="!item.hidden">
            <template slot="title">
              <i :class="item.iconClass"></i>
              <span slot="title" style="color: #fff">{{item.name}}</span>
            </template>
            <el-menu-item-group v-for="(child,index) in item.children" :key="index" v-if="!child.hidden">
              <el-menu-item :index="child.path" style="color: #fff">
                <i :class="child.iconClass"></i>
                {{child.name}}
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </template>
      </el-menu>
    </el-aside>


    <el-dialog style="text-align: left" title="头像修改" :visible.sync="outerVisible">
      <el-form ref="form" :model="userInfo" label-width="120px" style="margin-top: 30px">
        <el-form-item label="头像">
          <el-upload
            class="upload-demo"
            ref="businessLicense"
            action
            :auto-upload="false"
            :on-change="uploadSectionFile"
            :file-list="fileList"
            list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
      </el-form>
    </el-dialog>


  </div>


</template>

<script>
  export default {
    data() {
      return {
        isCollapse: false,
        menus: [],
        fileList: [],
        outerVisible:false,
        avatar:'',
        activePath: '',
        userInfo:{},
        username: 'ERROR',
        src: '../../static/images/tx.jpg'
      }
    },
    created() {
      // this.activePath = this.menus[2].children[1].path
      this.initImages();
      this.initMenu();

    },
    methods: {
      initMenu(){
        let data = JSON.parse(sessionStorage.getItem("userInfo"));
        this.userInfo = data;
        if (data.role_id == 0) {
          this.menus = [...this.$router.options.routes]
        } else {
          this.menus = [...this.$router.options.routesUser]
        }
      },
      editParam() {
        this.fileList = [];
        this.fileList.push({name:this.avatar,url:this.$a + '/tbowner/images?fileName='+this.avatar})
        this.outerVisible = true;
      },

      uploadSectionFile(file) {
        this.fileList = [];
        const typeArr = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg'];
        const isJPG = typeArr.indexOf(file.raw.type) !== -1;
        const isLt3M = file.size / 1024 / 1024 < 3;
        if (!isJPG) {
          this.$message.error('只能是图片!');
          this.$refs.upload.clearFiles();
          this.files = null;
          return;
        }
        if (!isLt3M) {
          this.$message.error('上传图片大小不能超过 3MB!');
          this.$refs.upload.clearFiles();
          this.files = null;
          return;
        }
        this.files = file.raw;
        // FormData 对象
        let formData = new FormData();
        // 文件对象
        formData.append('file', this.files);
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          },
          methods: 'post'
        }
        this.service.post("/tbowner/fileUpload", formData, config).then(res => {

          this.avatar = res.data.filename
          this.fileList.push({name:res.data.filename,url:this.$a + '/tbowner/images?fileName=' + res.data.filename})

          this.userInfo.avatar =  res.data.filename;
           this.service.post('/tbowner/add'
            , {data:  this.userInfo})
            .then(result => {
              let data = result.data;
              if (data.code == 500) {
                this.$message.error("请求失败：" + data.data)
              }
              if (data.data > 0) {
                this.$message.success('修改成功')
                sessionStorage.setItem("userInfo", JSON.stringify(this.userInfo));
                this.initImages();
                this.outerVisible = false;
              } else {
                this.$message.error('修改失败')
              }
            })


        })
      },



      initImages() {
        let data = JSON.parse(sessionStorage.getItem("userInfo"));
        this.src = this.$a + '/tbowner/images?fileName=' + data.avatar
        this.avatar = data.avatar;
        this.username = data.username
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath)
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath)
      }
    }
  }
</script>

<style>
  .menu .el-aside {
    /*background-color: #D3DCE6;*/
    color: #fff;
    text-align: center;
    line-height: 200px;
  }

  .menu .el-aside .el-menu {
    height: 100%;
    background-color: #222d32;
  }

  .el-menu-item.is-active {
    background-color: #409EFF !important;
  }

  .el-submenu__title:hover {
    background-color: #409EFF !important;

  }

  .el-menu-item:hover {
    background-color: #409EFF !important;

  }


</style>
